<template>
  <div class="signIn_form_layout_box">
    <div class="background_color_layout">
      <div>
        <div class="logo_box">
          <div>
            <img :src="loginInLogoUrl" class="yun_logo" />
          </div>
          <div class="name_font">认证中心</div>
        </div>
        <Row class="content_layout_box">
          <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
          <div class="signin_form_box">
            <!-- <div class="triangle-topright" @click="handleQrCodeSignIn(!showQrCodeSignIn)">
              <img
                  v-if="!showQrCodeSignIn"
                  src="https://manager-1254950508.cosgz.myqcloud.com/2024040309447189c3932e0-754c-11ea-882f-93a245acd5f3.png"
                />
                <img
                  v-if="showQrCodeSignIn"
                  src="https://manager-1254950508.cosgz.myqcloud.com/202404071753623966b2780-78b5-11ea-8ec4-67f044702c4b.png"
                />
            </div> -->
            <transition name="slide-fade">
              <QrCodeSignIn v-if="showQrCodeSignIn" class="qr-code-main" signInType="normal"
                @onSignInSuccess="handleQrCodeSignInSuccess" />
              <div v-else class="signin_form">
                <Tabs value="password" @on-click="handleSigninSwitch">
                  <TabPane label="密码登陆" name="password">
                    <Form ref="passwordForm" :model="formData" :rules="passwordFormRule">
                      <FormItem prop="user" label="用户">
                        <Input type="text" v-model="formData.user" placeholder="请输入email / phone" />
                      </FormItem>
                      <FormItem prop="password" label="密码">
                        <Input type="password" v-model="formData.password" placeholder="请输入密码" />
                      </FormItem>
                    </Form>
                  </TabPane>
                  <TabPane label="短信登陆" name="smsCode">
                    <Form ref="smsCodeForm" :model="formData" :rules="smsFormRule">
                      <FormItem prop="phone" label="电话">
                        <Input type="text" v-model="formData.phone" placeholder="请输入电话号码" />
                      </FormItem>
                      <FormItem prop="smsCode" label="验证码">
                        <Input type="text" v-model="formData.smsCode" placeholder="请输入短信验证码">
                        <span slot="append" style="color: #2d8cf0">
                          <Button type="primary" @click="handleSendSms" :disabled="disableSendSms">{{ smsText
                            }}</Button>
                        </span>
                        </Input>
                      </FormItem>
                    </Form>
                  </TabPane>
                </Tabs>

                <Button long type="primary" @click="handleSubmit(signinType)" :loading="loginLoading">登陆</Button>

                <Row class="other-login">
                  <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                  其它登陆方式:
                  <span>
                    <Avatar src="" />
                  </span>
                  </Col>
                  <Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
                  <div class="forget_password">
                    <router-link to="/resetPassword">重置密码</router-link>
                  </div>
                  </Col>
                </Row>
              </div>
            </transition>
          </div>
          </Col>
          <!-- <Col :xs="0" :sm="0" :md="12" :lg="12" :xl="12" :xxl="12">
            <div class="app_qrcode_box">
              <div class="app_qrcode">
                <img
                  src="https://tmch-jpxl-1254950508.file.myqcloud.com/222A17EC-F1CC-C1A1-242D.jpg"
                  class="app_qrcode_img"
                />
              </div>
              <div class="official_documents_and_correspondence">
                <div>更多精彩 更优服务</div>
                <div>下载平台APP</div>
              </div>
            </div>
          </Col> -->
        </Row>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Form,
  FormItem,
  Input,
  Icon,
  Button,
  Tabs,
  TabPane,
  Message,
  Avatar,
  Row,
  Col
} from "view-design";
import config from "@/utils/config";
import QrCodeSignIn from "../QrCodeSignIn";
import appService from "@/utils/appService";
import request from "@/utils/request";
export default {
  components: {
    Form,
    FormItem,
    Input,
    Icon,
    Button,
    Tabs,
    TabPane,
    Avatar,
    Row,
    Col,
    QrCodeSignIn
  },
  data() {
    return {
      loginInLogoUrl: require("@/assets/shimingrenzheng.png"),
      showQrCodeSignIn: false,
      loginLoading: false,
      signinType: "password",
      smsText: "发送验证码",
      disableSendSms: false,
      formData: {
        user: null,
        password: null,
        smsCode: null,
        phone: null
      },
      passwordFormRule: {
        user: [
          {
            required: true,
            message: "请输入邮箱或电话号码",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      smsFormRule: {
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur"
          }
        ],
        smsCode: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  async mounted() {
    this.loginLoading = true;
    let response = await request.getRequest(
      `${config.serverProxy}${config.authServicePath}/user/getMyInfo`
    );
    if (response.status === 200 && response.data.errorCode === 0) {
      let userInfo = response.data.data;
      appService.saveUserInfo(userInfo);
      await appService.reloadUserRole();
      await appService.reloadUserPermission();
      this.$router.push("/");
    }
    this.loginLoading = false;
  },
  methods: {
    handleQrCodeSignIn(show) {
      this.showQrCodeSignIn = show;
    },
    handleQrCodeSignInSuccess(data) {
      let userInfo = data.userInfo;
      appService.saveUserInfo(userInfo);
      this.$router.push("/");
    },
    getCallBackPath() {
      let callBackUrl =
        window.location.protocol +
        config.uiPath +
        config.publicPath +
        "callBack";
      return callBackUrl;
    },
    handleGithubLogin() {
      let loginUrl =
        "https://github.com/login?client_id=7ed9187fca320fd56216&return_to=/login/oauth/authorize?client_id=7ed9187fca320fd56216&redirect_uri=";
      let redirectUri =
        this.getCallBackPath() +
        "?client_name=github&response_type=code&scope=user";
      redirectUri = encodeURIComponent(redirectUri);
      window.open(loginUrl + redirectUri, "_self");
    },
    handleSigninSwitch(name) {
      if (name === "password") {
        this.formData.smsCode = null;
        this.formData.phone = null;
        this.signinType = "password";
      } else if (name === "smsCode") {
        this.formData.user = null;
        this.formData.password = null;
        this.signinType = "smsCode";
      }
    },
    async handleSendSms() {
      let formData = this.formData;
      if (!formData.phone) {
        Message.error("请填写号码");
      } else {
        let resposne = await appService.getRequest(
          `${config.serverProxy}${config.authServicePath}/sms/getLoginCode`,
          { phone: formData.phone }
        );
        if (resposne.data.errorCode === 0) {
          this.disableSendSms = true;
          let countdown = 60;
          let point = window.setInterval(() => {
            if (countdown == 0) {
              this.disableSendSms = false;
              this.smsText = "发送验证码";
              window.clearInterval(point);
            } else {
              this.smsText = countdown + "s";
              countdown = countdown - 1;
            }
          }, 1000);
        }
      }
    },
    handleSubmit(rule) {
      rule = rule + "Form";
      let vm = this;
      this.$refs[rule].validate(async valid => {
        if (valid) {
          vm.loginLoading = true;
          let formData = JSON.parse(JSON.stringify(vm.formData));
          if (vm.signinType === "password") {
            var reg = /^\d+$/;
            if (reg.test(formData.user)) {
              formData.phone = formData.user;
            } else {
              formData.email = formData.user;
            }
            delete formData.user;
          }
          let url = `${config.serverProxy}${config.authServicePath}/auth/loginIn/userSignIn`;
          let response = await appService.postRequest(url, formData);
          if (response.status === 200 && response.data.errorCode === 0) {
            let userInfo = response.data.data;
            appService.saveUserInfo(userInfo);
          }
          vm.loginLoading = false;
          vm.$router.push("/");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.signIn_form_layout_box {
  height: 100%;
  background-image: url(../../assets/login_bg.jpeg);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  .background_color_layout {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.388235294117647);
    display: flex;
    align-items: center;
    justify-content: center;

    .logo_box {
      display: flex;
      justify-content: center;
      padding: 20px;

      .yun_logo {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .name_font {
        font-weight: 700;
        font-style: normal;
        font-size: 30px;
        color: #fff;
        display: flex;
        padding-left: 20px;
        align-items: center;
        justify-content: center;
      }
    }

    .content_layout_box {
      display: flex;
      justify-content: center;
      background-color: #efefef;

      .app_qrcode_box {
        width: 400px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;

        .app_qrcode {
          .app_qrcode_img {
            width: 250px;
            height: 250px;
          }
        }

        .official_documents_and_correspondence {
          padding-top: 20px;
          transform-origin: 76.5px 28px 0px;
          font-weight: 400;
          font-style: normal;
          font-size: 20px;
        }
      }

      .signin_form_box {
        width: 400px;
        min-height: 400px;
        background: #ffffff;

        .triangle-topright {
          width: 40px;
          height: 40px;
          position: absolute;
          right: 0px;
          top: 0px;
          z-index: 2;

          &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-bottom: 40px solid #ffffff;
            border-right: 40px solid transparent;
            position: absolute;
            left: 0;
            top: 0;
          }

          &>img {
            width: 40px;
            height: 40px;
            position: relative;
          }
        }

        .qr-code-main {
          position: absolute;
          top: 0;
          left: 0;
        }

        .signin_form {
          width: 100%;
          background: #ffffff;
          padding: 20px;

          .forget_password {
            color: #999;
            text-align: right;
          }

          .other-login {
            height: 20px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
